<script setup>
import { ref, reactive } from 'vue'
// 逻辑代码
import { imgUrls } from "@/network/request";
defineProps({ list: { type: Array, required: true } });


</script>

<template>
    <div>
        <!-- 精品推荐 -->
        <div style="width: 100%;background-color: #FFFFFF;margin-top:10px;">
            <div style="height: 28px;line-height: 35px;padding: 5px;">
                <span style="font-size: 16px;">精品推荐:</span>
            </div>
            <div style="margin-top: 10px;">
                <van-grid :column-num="2" :border="false">
                    <van-grid-item v-for="item in list" :key="item.id" :to="item.url">
                        <van-image :src="imgUrls + item.image" height="140" />
                        <span style="font-size: 13px;">
                            {{ item.storeName }}
                        </span>
                        <div style="display: inline;">
                            <span style="font-size: 18px;color: #ff8001;">￥{{ item.price }}</span>
                            <span style="font-size: 13px;color: #c0c4cc;text-decoration: line-through;">
                                ￥{{ item.otPrice }}
                            </span>
                        </div>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
    </div>
</template>

<style scoped>
.grid2 :deep(.van-hairline) {
    align-items: flex-start;
}

.grid2 {
    background-color: #f8f8f8;
    margin-top: 8px;
}
</style>